<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="/user/js/jquery-3.5.0.js"></script>
		<link rel="stylesheet" href="/user/css/pintuer.css">
		<link rel="stylesheet" href="/user/css/admin.css">
		<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"
			  rel="external nofollow" />
		<link rel='stylesheet' href='/user/css/index.css'>
		<script src="js/bootstrap.min.js"></script>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script src="/user/layer/layer.js"></script>
		<script type="text/javascript">
axios.interceptors.response.use(function (response) {
	console.log(response);
	console.log(response.headers);
	console.info("状态码："+response.data.code);
	if (response.data.code===500){
		window.location.href="/error/500.html";
	}
	return response;
}, function (error) {
	return Promise.reject(error);
});
</script>
		<!-- css样式文件 -->
		<style type="text/css">
			html, body, .containter {
				width: 100%;
				height: 500px;
				margin: 0 auto;
				box-shadow: 0 1px 5px #aaa;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}

			#container {
				width: 100%;
				height: 95%;
				float: left;
				box-sizing: border-box;
				padding: 0px;
				box-shadow: 0 1px 5px #aaa;
			}

			.info_ul {
				margin: 0 0 5px 0;
				padding: 0.2em 0;
			}

			.info_ui_Nimg {
				background-image: url("images/YNormal.png");
				background-position: 97% 0%;
				background-repeat: no-repeat;
				background-size: 40px;
			}

			.info_li {
				line-height: 26px;
				font-size: 15px;
				color: #0C8816;
			}

			.info_lierr {
				line-height: 26px;
				font-size: 15px;
				color: #D81E06;
				border: none;
			}

			.info_span {
				width: 80px;
				display: inline-block;
			}

			.btn {
				width: 80px;
				text-align: center;
				height: 30px;
				line-height: 30px;
				border-radius: 5px;
				cursor: pointer;
				background-color: #D81E06;
				color: #fff;
				margin: 0 auto;
			}

			.ta-c {
				text-align: center;
				margin-top: 10px;
			}
		</style>
	</head>
	<body class=" nav-header">
	<header class="">
		<div class="head-box">
			<div class="container">
				<div class="head-left">
					<div class="head-left-wrapper">
						<div class="head-left-slide">
							<p>欢迎光临全民健身！</p>

						</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	<nav class="navbar navbar-default met-nav " role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button"
						class="navbar-toggle hamburger hamburger-close collapsed"
						data-target="#navbar-default-collapse" data-toggle="collapse">
					<span class="sr-only"> Toggle navigation </span> <span
						class="hamburger-bar"> </span>
				</button>
				<a href="#" class="navbar-brand navbar-logo vertical-align" title="">
					<h1 class='hide'>全民健身</h1>
					<div class="vertical-align-middle">
						<img src="picture/logo.png" alt="" title="" />
					</div>
				</a>
				<h2 class='hide'></h2>
			</div>
			<div class="collapse navbar-collapse navbar-collapse-toolbar"
				 id="navbar-default-collapse">

				<ul class="nav navbar-nav navbar-right navlist">
					<li class="margin-right-20"><a href="index.html" title="首页"
												   class="link "> 首页 </a></li>
					<li class="dropdown margin-right-20"><a class="link  "
															href="findCoach.html"> 教练信息 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link "
															href="findVenue.html"> 场馆信息 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link active"
															href="relationship.html"> 关注 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  "
															href="notice.html"> 通知 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  "
															href="usercenter/index.html"> 个人中心 </a>
						<ul style="display: none">
						</ul></li>
				</ul>
			</div>
		</div>
	</nav>
		<div class="panel admin-panel" id="app">
			<table class="table table-hover text-center">
				<tr>
					<th>序号</th>
					<th>昵称</th>
					<th>头像</th>
					<th>操作</th>
				</tr>
				<tbody>
				<tr v-for="(relationship, index)  in relationships">
						<td>{{ index+1}}</td>
					<td>{{relationship.nickname}}</td>
						<td><img v-bind:src="relationship.avatar" class="img-circle" width="10%" height="10%"></td>
					<td><button @click="borrow(relationship.followed)" class="btn btn-outline-primary">查看</button></td>
							</td>
					</tr>
				</tbody>
				<tfoot id="map">
					<tr>
						<td colspan="10">
							<div class="pagelist">
								<a v-for="n in totalPage" v-on:click="updatePage(n)">{{n}}</a>
							</div>
							<div id="error" style="color: red"></div>
						</td>
					</tr>
				</tfoot>
			</table>
			<!--分页-->
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					relationships:[],
					p:1,
					totalPage:""
				},
				mounted(){	//当页面元素加载之前执行
					axios.get("/user/selectRelationship?p="+this.p)
							.then(res => {
								console.info(res);
								this.relationships=res.data.data.data;
								this.totalPage=res.data.data.totalPage;
							});
				},
				methods:{
					updatePage:function(n){
						console.log(n);
						axios.get("/user/selectRelationship?p="+n)
								.then(res => {
									console.info(res);
									this.relationships=res.data.data.data;
									this.totalPage=res.data.data.totalPage;
								});
					},
					borrow:function(followed){
						var params = new URLSearchParams();
						params.append("uid",followed);
						axios.post(
								"/user/selectUserById",
								params
						).then(res => {
							//console.info(res.data);
							console.log(res.data);
							if (res.data.data==null){
								layer.msg('该账户未公开用户信息!', {icon: 5});
							} else if (res.data.data.isOpen=="2"){
								layer.open({
									success: function(layero){
										layero.find('.layui-layer-min').remove();
									},
									type: 2,
									skin: 'layui-layer-demo', //样式类名
									title: false,
									closeBtn: 2, //不显示关闭按钮
									anim: 5,
									isOutAnim:true,
									scrollbar:true,
									resize:false,
									maxmin:true,
									area: ['893px', '600px'],
									shadeClose: true, //开启遮罩关闭
									content: 'relationship_view.html?uid='+res.data.data.uid
								});
							}else {
								layer.msg('该账户未公开用户信息!', {icon: 5});
							}
						});
					},
				}
			});
		</script>
	</body>
</html>
